import axios from '../../../../../../../../util/axios'
import { useState, useEffect } from 'react'
import { Table, Switch, Space, Select, Modal, Button } from 'antd';
import './index.css'
const { Option } = Select;
const Booking_list = () => {
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '头像',
            dataIndex: 'img',
            key: 'img',
            render: (text, record) => {
                return <>
                    <img style={{ height: "80px", width: "80px" }} src={record.img} alt="" />
                </>
            }
        },
        {
            title: '开团团长',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '开团时间',
            dataIndex: 'ktime',
            key: 'ktime',
        },
        {
            title: '拼团商品',
            dataIndex: 'pshop',
            key: 'pshop',
        },
        {
            title: '几人团',
            dataIndex: 'jren',
            key: 'jren',
        },
        {
            title: '几人参加',
            dataIndex: 'cren',
            key: 'cren',
        },
        {
            title: '结束时间',
            dataIndex: 'jietime',
            key: 'jietime',
        },
        {
            title: '拼团状态',
            dataIndex: 'lls',
            key: 'lls',
            render: (text) => {
                return <>
                    <Switch checked={text === "true" ? true : false} onChange={() => { onChange(text) }} />
                </>
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <Button onClick={() => { goDetail(record) }}>查看详情</Button>
                    <Button onClick={() => { goDelete(record) }}>删除</Button>
                </Space>
            ),
        },
    ];
    const details = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '头像',
            dataIndex: 'img',
            key: 'img',
            render: (text, record) => {
                return <>
                    <img style={{ height: "80px", width: "80px" }} src={record.img} alt="" />
                </>
            }
        },
        {
            title: '开团团长',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '开团时间',
            dataIndex: 'ktime',
            key: 'ktime',
        },
        {
            title: '拼团商品',
            dataIndex: 'pshop',
            key: 'pshop',
        },
        {
            title: '几人团',
            dataIndex: 'jren',
            key: 'jren',
        },
        {
            title: '几人参加',
            dataIndex: 'cren',
            key: 'cren',
        },
        {
            title: '结束时间',
            dataIndex: 'jietime',
            key: 'jietime',
        },
        {
            title: '拼团状态',
            dataIndex: 'lls',
            key: 'lls',
            render: (text) => {
                return <>
                    <Switch checked={text === "true" ? true : false} onChange={() => { onChange(text) }} />
                </>
            }
        },
    ]
    const [list, setlist] = useState([])
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [detail, setdetail] = useState([])
    useEffect(() => {
        getlist()
    }, [])
    const getlist = async () => {
        let res = await axios.get('/grouppurchaselist')
        setlist([...res.data.data])
    }
    const goDetail = (record) => {
        setdetail(() => {
            setIsModalVisible(true);
            return [{ ...record }]
        })
        // console.log(detail)
    }
    const handleChange = async (value) => {
        if (value === "已完成") {
            let res = await axios.get('/grouppurchaselistshai', {
                params: { sou: true }
            })
            setlist([...res.data.data])
        } else if (value === "未完成") {
            let res = await axios.get('/grouppurchaselistshai', {
                params: { sou: false }
            })
            setlist([...res.data.data])
        } else {
            let res = await axios.get('/grouppurchaselistshai', {
                params: { sou: value }
            })
            setlist([...res.data.data])
        }
    }
    function onChange(text) {
        // console.log(`switch to ${checked}`);
        console.log(text)
    }
    const handleOk = () => {
        setIsModalVisible(false);
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //删除
    const goDelete = async (record) => {
        let res = await axios.delete('/grouppurchaselistDel', {
            params: { key: record.key }
        })
        console.log(res)
        getlist()
    }
    return <div>
        <div>
            <div>拼团状态:<Select defaultValue="请选择" style={{ width: 200 }} onChange={handleChange}>
                <Option value="请选择">请选择</Option>
                <Option value="已完成">已完成</Option>
                <Option value="未完成">未完成</Option>
            </Select></div>
        </div>
        <Modal title="查看详情" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            <Table columns={details} rowKey="id" dataSource={detail} pagination={false} />
        </Modal>
        <Table columns={columns} rowKey="id" dataSource={list} pagination={{ pageSize: 5 }} />
    </div>
}
export default Booking_list